<template>
  <h1>EL-菜单组件</h1>
  <!--
    sub: 子级
    active-text-color="": 被选中的菜单项的文本的颜色
    text-color="": 菜单栏的文本的颜色
    @select="": 菜单项点击时触发指定事件
    default-active="6-2": 默认选中某一菜单项
  -->
  <el-menu mode="horizontal" active-text-color="deeppink" text-color="pink" background-color="lightgrey" @select="handleSelect" default-active="6-2">
    <!--
      菜单的默认排列默认为纵向排列 通过mode=""属性可以更改
      mode="vertical" 纵向排列
      mode="horizontal" 横向排列
    -->
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">性感猫女</el-menu-item>
    <el-menu-item index="3">活泼萝莉</el-menu-item>
    <el-menu-item index="4">傲娇巨乳</el-menu-item>
    <el-menu-item index="5">色情蛇妖</el-menu-item>
    <el-sub-menu index="6">
      <template #title>深V秘书</template>
      <el-menu-item index="6-1">懂事型</el-menu-item>
      <el-menu-item index="6-2">抖M型</el-menu-item>
      <el-menu-item index="6-3">女王型</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
/*
  index 表示选中的菜单栏当中的选项的索引值 如 选中`活泼萝莉`时 index=3
  indexPath 表示选中菜单项的路径 每层路径之间用逗号隔开 如选中index为6-6-3的菜单项
            则路径为: 6,6-6,6-6-3
 */
const handleSelect = (index, indexPath) => {
  console.log(index, indexPath)
}
</script>

<style scoped>

</style>